<template>
  <div class="risk">
    <van-search
      class="info_search input_text"
      v-model="value"
      @search="onSearch"
      @clear="clearSearch"
      placeholder="搜索"
    />
    <van-list
      style="margin: 10px"
      :finished="myFinished"
      v-model="myLoading"
      finished-text="没有更多了"
      @load="myOnLoad"
    >
      <van-cell
        style="margin-top: 10px"
        class="br-8"
        v-for="(item, index) in myList"
        :key="index"
      >
        <div>
          <div @click.stop="goDetail(item)">
            <div class="dep_sort">
              <div>
                {{ item.CheckPlanName }}
              </div>
            </div>
            <van-row gutter="20" class="dep_sort">
              <van-col span="14">
                <img
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />{{ item.CheckTypeName +(item.ItemTypeName?'('+item.ItemTypeName+')':'') }}</van-col
              >
              <van-col span="10">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />{{ item.CreateChnName }}</van-col
              >
            </van-row>
            <van-row gutter="20" class="dep_sort">
              <van-col span="14">
                <img
                  src="@/assets/Images/AppIcon/icon_list_time.png"
                  alt=""
                />{{ item.StatusName }}</van-col
              >
              <van-col span="10">
                <img
                  src="@/assets/Images/AppIcon/icon_list_repeat.png"
                  alt=""
                />{{ item.CheckFrequencyName }}</van-col
              >
            </van-row>
            <van-row class="dep_sort">
              <van-col>
                <img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
                {{ item.StartDate }} 至 {{ item.EndDate }}
              </van-col>
            </van-row>
            <van-divider />
           <van-button
              class="ml-10 mb-5"
              style="float: right"
              v-if="item.AllowDelete"
              size="small"
              type="default"
              @click.stop="deletePlan(item)"
              >删除</van-button
            >
            <van-button
              style="float: right"
              v-if="item.AllowPublish"
              @click.stop="publishPlan(item)"
              class="ml-10 mb-5"
              size="small"
              type="default"
              >发布</van-button
            >
            <van-button
              style="float: right"
              v-if="item.AllowEnd"
              @click.stop="endPlan(item)"
              class="ml-10 mb-5"
              size="small"
              type="default"
              >结束</van-button
            >
            <van-button
              style="float: right"
              v-if="item.AllowTrack"
              @click.stop="followPlan(item)"
              class="ml-10 mb-5"
              size="small"
              type="default"
              >跟踪</van-button
            >
            <van-button
              style="float: right"
              v-if="item.AllowRevoke"
              @click.stop="backPlan(item)"
              class="ml-10"
              size="small"
              type="default"
              >撤销</van-button
            >
          </div>
        </div>
      </van-cell>
    </van-list>
    <!-- 弹出层 -->
    <van-dialog v-model="show" :showConfirmButton="false">
      <div class="dialog-content">
        <div class="dialog-title">询问</div>
        <div class="dialog-content-radio">
          <span>您确定要结束该检查计划吗?</span>
        </div>
        <div class="dialog-bottom">
          <div></div>
          <div>
            <span @click="show = false">取消</span>
            <span class="complete-btn" @click="endBackConfirm('false')"
              >结束计划</span
            >
            <!-- <span class="complete-btn" @click="endBackConfirm('true')"
              >结束计划及任务</span
            > -->
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  list,
  deletePlan,
  publishPlan,
  backPlan,
  endBackConfirm,
} from "@/api/sytech/sytechDangerCheckPlan";
import { getDate } from "@/utils/getDate";
export default {
  data() {
    return {
      value: "",
      myList: [],
      myFilter: {
        page: 0,
        dataType: "List",
        cType: 1,
      },
      id: "",
      show: false,
      myLoading: false,
      myFinished: false,
    };
  },
  created() {
    this.getMyList();
  },
  methods: {
    onSearch() {
      this.myFilter.page = 0;
      var conditions = [
        {
          Name: "Keywords",
          DisplayName: "",
          Value: "",
          Operator: "like",
          DataType: "String",
        },
      ];
      conditions.forEach((item) => {
        item.DisplayName = this.value;
        item.Value = this.value;
      });

      this.myFilter.conditions = JSON.stringify(conditions);
      this.getMyList();
    },
    clearSearch() {
      this.myFilter = {
        page: 0,
        dataType: "List",
        cType: 1,
      };
      this.getMyList();
    },
    getMyList() {
      this.myLoading = true;
      list(this.myFilter).then((res) => {
        this.myLoading = false;
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
        res.data.Data.forEach((item) => {
          item.StartDate = getDate(item.StartDate);
          item.EndDate = getDate(item.EndDate);
        });
        this.myList = res.data.Data;
        this.myFilter.page = res.data.PageIndex;
      });
    },
    myOnLoad() {
      this.myLoading = true;
      ++this.myFilter.page;
      list(this.myFilter).then((res) => {
        res.data.Data.forEach((item) => {
          item.StartDate = getDate(item.StartDate);
          item.EndDate = getDate(item.EndDate);
        });
        this.myLoading = false;
        this.myFilter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
    },
    // 删除
    deletePlan(item) {
      const that = this;

      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要删除该检查计划吗？",
        })
        .then(() => {
          deletePlan({ id: item.ID }).then((res) => {
               this.$toast.success('删除成功！')
            that.getMyList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    endPlan(item) {
      this.show = true;
      this.id = item.ID;
    },

    endBackConfirm(params) {
      endBackConfirm({ id: this.id, finishTask: params }).then((res) => {
        this.$toast.success('结束成功！')
        this.show = false

        this.getMyList();
      });
    },

    publishPlan(item) {
      const that = this;

      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要发布该检查计划吗？",
        })
        .then(() => {
          publishPlan({ id: item.ID }).then((res) => {
            this.$toast.success('发布成功！')
            that.getMyList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    backPlan(item) {
      const that = this;
      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要撤回该检查计划吗？",
        })
        .then(() => {
          backPlan({ id: item.ID }).then((res) => {
            this.$toast.success('撤回成功！')
            that.getMyList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    goApprove(item) {
      this.$router.push("/SytechDangerCheckPlanApprove?recordID=" + item.ID);
    },

    followPlan(item) {
      this.$router.push("/SytechDanger/DangerCheckPlanFollow?CPCode=" + item.CPCode);
    },

    // 设备详情
    goDetail(item) {
      if (!item.AllowEdit) {
        this.$router.push({
          path: "/SytechDanger/CheckPlanDetail",
          query: { id: item.ID },
        });
      } else {
        this.$router.push({
          path: "/SytechDanger/CheckPlanEdit",
          query: { id: item.ID },
        });
      }
     
    },
  },
};
</script>

<style lang="less" scoped>

.risk {
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.all_dep {
  background-color: #ffffff;
}

.warn_item {
  /*margin-bottom: 10px;*/
  // padding: 10px 0 10px 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}

// 弹框
.dialog-content {
  position: relative;
  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 14px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
  .dialog-content-radio {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 15px;
  }
}
</style>
